<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["commonData", "time1", "time2", "xData"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
    };
  },
  watch: {
    commonData: function (data) {
      this.allData = data;
      this.getData();
    },
    xData: function (data) {
      this.xDatas = data;
      this.getData();
    },
    time1: function () {
      this.getData();
    },
    time2: function () {
      this.getData();
    },
  },

  mounted() {
    setTimeout(() => {
      this.initChart();

      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 500);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      const CubeLeft = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - 9, shape.y - 7]; //左上角
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 10]; //右上角
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      const CubeRight = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 2]; //右下
          const c4 = [shape.x + 18, shape.y - 1];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      const CubeTop = this.$echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + 18, shape.y - 1]; //右下
          const c3 = [shape.x + 9, shape.y - 8]; //右上
          const c4 = [shape.x - 9, shape.y - 7];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
      this.$echarts.graphic.registerShape("CubeTop", CubeTop);

      
      var dataName = [];

     
      this.allData.map((item) => {
        dataName.push(item.name);
      });

      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },

        grid: {
          left: "3%",
          right: "3%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        // 顶部小方格
        legend: {
          data: dataName,
          textStyle: {
            align: "right",
          },
          top: "3%",
        },
        xAxis: {
          //   data: this.xDatas,
          type: "category",
          axisLabel: {
            color: "",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#9D9EA0",
            },
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {
              color: "#DEDEDE",
              // 	opacity:0.1
            },
          },
          axisTick: false,
        },

        yAxis: {
          name: "(t)", //名称
          type: "value",

          axisLine: {
            show: true,
            lineStyle: {
              color: "#9D9EA0",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#9D9EA0",
            },
          },
          splitLine: {
            //分隔辅助线
          },
        },

        //底部收缩条
        // dataZoom: [
        //   {
        //     show: true,
        //     height: 5,
        //     xAxisIndex: [0],
        //     bottom: "3%",
        //     start: 10,
        //     end: 90,
        //     handleIcon:
        //       "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        //     handleSize: "110%",
        //     handleStyle: {
        //       color: "#d3dee5",
        //     },
        //     textStyle: {
        //       color: "#fff",
        //     },
        //     borderColor: "#90979c",
        //   },
        //   {
        //     type: "inside",
        //     show: true,
        //     height: 15,
        //     start: 1,
        //     end: 35,
        //   },
        // ],
        // 柱子数据
        series: [
          {
            name: dataName[0],
            type: "bar",
             barMaxWidth: 15,
            zlevel: 10,
            smooth: true, //平滑曲线显示
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#4F93FE",
                    },
                    {
                      offset: 1,
                      color: "#4F93FE",
                    //   color: "#A7D6FF",
                    },
                  ],
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "left", //文字显示位置
                  textStyle: {
                    //数值样式
                    color: "#3b6ebf",
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              },
            },
          },
          {
            name: dataName[1],
            type: "bar",
            barMaxWidth: 15,
            zlevel: 10,
            smooth: true, //平滑曲线显示
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#8bd46e",
                    },
                    {
                      offset: 1,
                      color: "#8bd46e",
                    //   color: "#dcf7d1",
                    },
                  ],
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "right", //文字显示位置
                  textStyle: {
                    //数值样式
                    color: "#8bd46e",
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              },
            },
            
          },
        ],
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: true,
              lang: [
                this.time1.substr(0, 10) +
                  "至" +
                  this.time2.substr(0, 10) +
                  "产能分析",
                "关闭",
              ],
              optionToContent: function (opt) {
                console.log("opt",opt);
                var axisData = opt.xAxis[0].data;
                var series = opt.series; //折线图数据
                let tdHeads =
                  '<td  style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333"">材料类别</td>'; //表头
                let tdBodys = ""; //数据
                series.forEach(function (item) {
                  //组装表头
                  tdHeads += `<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">${item.name}</td>`;
                });
                let table = `<table   border="1" style=" width: 96%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" class="dataViewTable"><tbody><tr>${tdHeads} </tr>`;
                for (let i = 0, l = axisData.length; i < l; i++) {
                  for (let j = 0; j < series.length; j++) {
                    //组装表数据
                    tdBodys += `<td>${series[j].data[i]}</td>`;
                  }
                  table += `<tr><td style="padding: 2px 10px;text-align: center">${axisData[i]} </td>${tdBodys}</tr>`;
                  tdBodys = "";
                }
                // var table =
                //   '<table class="echartsTable"><tbody><tr>' +
                //   '<td class="typeshi">材料类别</td>' +
                //   "<td>" +
                //   series[0].name +
                //   "</td>" +
                //   "<td>" +
                //   series[1].name +
                //   "</td>" +
                //   "</tr>";
                // for (var i = 0, l = axisData.length; i < l; i++) {
                //   table +=
                //     "<tr>" +
                //     "<td>" +
                //     axisData[i] +
                //     "</td>" +
                //     "<td>" +
                //     series[0].data[i] +
                //     "</td>" +
                //     "<td>" +
                //     series[1].data[i] +
                //     "</td>" +
                //     "</tr>";
                // }
                table += "</tbody></table>";
                return table;
              },
            },
            magicType: {
              type: ["line", "bar"],
              option: {
                type: "line",
              },
            },
            restore: {},
            saveAsImage: {},
          },
        },
      };
      this.chartInstance.setOption(option);
    },
    getData() {
      var that = this;
      setTimeout(() => {
        that.updateChart();
      }, 800);
    },

    
    updateChart() {
      var data = this.allData;
      var dataOption = {
        title: {
          text:
            this.time1.substr(0, 10) +
            "至" +
            this.time2.substr(0, 10) +
            "产能分析",
        },
        xAxis: {
          data: this.xData,
        },
        series: [
          {
            data: [
              data[0].water,
              data[0].cement1,
              data[0].cement2,
              data[0].aggregate1,
              data[0].aggregate2,
              data[0].aggregate3,
              data[0].aggregate4,
              data[0].aggregate5,
              data[0].aggregate6,
            ], //实际
          },
          {
            data: [
              data[1].water,
              data[1].cement1,
              data[1].cement2,
              data[1].aggregate1,
              data[1].aggregate2,
              data[1].aggregate3,
              data[1].aggregate4,
              data[1].aggregate5,
              data[1].aggregate6,
            ], //设计
          },
        ],
      };

      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;
      // console.log(titleFontSize);

      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
            // fontWeight: 500
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope>
/* echarts表格样式 */
.echartsTable {
  width: 100%;
  text-align: center;
  min-height: 25px;
  line-height: 25px;
  border-collapse: collapse;
  padding: 2px;
  font-size: 12px;
  //   display: flex;
}

.echartsTable,
.echartsTable tr th,
.echartsTable tr td {
  // border: 1px solid gray;
  // flex: 1;
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 2px 5px;
}

.echartsTable .typeshi {
  width: 30%;
}

.echartsTable tr:nth-child(even) {
  border-bottom: 1px solid gray;
  background: #f9f9f9;
}
</style>
